<template>
  <div class="filter">
    <el-form :model="searchForm"
             :rules="paramsData.rules"
             v-show="showSearch"
             ref="searchForm">
      <el-row :gutter="20">
        <el-col :sm="4"
                :md="6"
                :lg="6"
                v-for="item in paramsData"
                :key="item.index">
          <el-form-item :label="item.label"
                        :prop="item.prop"></el-form-item>
        </el-col>
      </el-row>
      <div class="el-dialog__footer">
        <el-button class="el-icon-refresh-left"
                   @click="refresh"></el-button>
        <el-button class="el-icon-circle-check"
                   @click="searhForm"></el-button>
      </div>
    </el-form>
  </div>
</template>
<script>
export default {
  name: 'filterSearch',
  props: {
    paramsData: {
      type: Array,
      default () {
        return {}
      }
    },
    showSearch: {
      type: Boolean,
      default: true,
      required: true
    }
  },
  data () {
    return {}
  },
  methods: {
    refresh () {
      this.searchForm.resetFields()
    },
    searhForm () {
      this.$emit('filterSearch', { searchForm: this.searchForm })
    }
  }
}
</script>
<style lang="scope">
.filter {
  border: 1px solid #979797;
  padding: 20px;
}
</style>
